
//返回顶部
//判断当距离大于600的时候显示回到顶部

//获取元素
let inputret=document.querySelector('#inputret')
console.log(inputret);

window.addEventListener('scroll',function(){
    
//获取距离
let scrolllength=document.documentElement.scrollTop
// console.log(scrolllength);
    //判断
    if(scrolllength>=600){
      inputret.style.display='block'
    }else{
      inputret.style.display='none'
    }
})
//点击retop平缓回到顶部
inputret.addEventListener('click',function(){
/*     window.scrollTo({
        top:0,
        behavior:'smooth'
    }) */
     buffer(document.documentElement,{scrollTop:0})
})

//// 模拟服务器上的传递过来的数据
let apiTypeData = [
  { name: "全部", keyword: "身份证实名", isnew: false },
  { name: "生活服务", keyword: "银行卡", isnew: false },
  { name: "金融科技", keyword: "短信", isnew: false },
  { name: "交通地理", keyword: "天气", isnew: false },
  { name: "充值缴费", keyword: "短信", isnew: false },
  { name: "数据智能", keyword: "手机归属地", isnew: false },
  { name: "企业工商", keyword: "IP", isnew: false },
  { name: "应用开发", keyword: "手机归属地", isnew: false },
  { name: "电子商务", keyword: "IP", isnew: false },
  { name: "吃喝玩乐", keyword: "视频", isnew: false },
  { name: "文娱视频", keyword: "视频", isnew: false },
  { name: "免费接口大全", keyword: "短信", isnew: true },
  { name: "短信", keyword: "身份证实名", isnew: false },
  { name: "汽车", keyword: "银行卡", isnew: false },
  { name: "核验", keyword: "银行卡", isnew: false },
  { name: "最新发布", keyword: "银行卡", isnew: true },
  { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]

/* 
*1.需求:遍历后台传输的数据apiTypeData,把name属性值,组装成html代码,再把组装好的html代码放进APIcontent-link里面
*/
//获取元素
let APIcontentLink=document.querySelector('.APIcontent-link')

// console.log(APIcontentLink);

//定义一个变量,保存组装好的数据
let APIHTML=''

apiTypeData.forEach(function(v){
  //拼装数据
  APIHTML+=`
  <a href="#" class="${v.isnew? 'active':''}" data-keyword="${v.keyword}">${v.name}</a>
  `
})
console.log(APIHTML);

/* 
*需求:2再将组装好的数据渲染到APIcontent-link里面,获取当前事件源的自定义属性keyword,渲染给api-search-text
 * 注意: 事件委派中this不能代表当前触发对象,慎用
 *       事件委派中: 事件源 - e.target
 */

APIcontentLink.innerHTML=APIHTML

//获取元素
let APIcontentall=document.querySelector('.APIcontentall')
// console.log(APIcontentall);

let APIcontentid=document.querySelector('.APIcontentid')
// console.log(APIcontentid);
/* 
*需求3:利用事件委派给APIcontent-link添加点击事件,将当前事件源的文本内容渲染到APIcontentall
*/
APIcontentLink.addEventListener('click',function(e){
  //  console.log(8);
  if(e.target.nodeName==='A'){
    // console.log(0);
    APIcontentall.textContent=e.target.textContent

    APIcontentid.placeholder=e.target.dataset.keyword
  }
  
})

/* 
*3:模拟api列表数据
*/
//API列表数据,模拟服务器返回的数据

//定义数据
let listDataArr = [
  //第一行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

  //第二行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  //第三行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  //第四行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
/* 
*需求4:遍历数组listDataArr,组装成html代码,并渲染到APIcontentul
*/
//获取元素
let APIcontentul=document.querySelector('.APIcontentul')
 console.log(APIcontentul);

//封装APIcontentul列表函数
function returnlist(){
  //定义变量保存html代码
let APIcontentulhtml=''

//先遍历服务器传来的数据组成的数组
listDataArr.forEach(function(v){

  //组装数据
  APIcontentulhtml+=`
<li class="APIcontentli fl">
  <span class="APIcontentlifirm ${v.isSpecial ? 'show'
:''}" >企业专业</span>
  <a class="APIcontentbox" href="../page./APIDetails.html">
      <span><img src="../images/${v.img}" alt=""></span>
      <P class="APIcontentboxp">${v.name}</P>
      <P class="APIcontentboxp2 APIcontentboxp3 ${v.price==='免费' ? 'green':'red'}">${v.price}</P>
  </a>
  <a class="APIcontentlidata" href="#">申请数据</a>
</li>
  `
})

//渲染到页面
APIcontentul.innerHTML=APIcontentulhtml
}
//调用函数
returnlist()

/* 
*需求5:点击APIcontentlidata显示蒙层
 */
//获取元素
let APIcontentlidata=document.querySelectorAll('.APIcontentlidata')

let maskall=document.querySelector('.maskall')

// let APIcontentul=document.querySelectorAll('.APIcontentul')
console.log(APIcontentlidata ,maskall);

//注册点击事件

/* // 方法一:遍历点击事件
//遍历
APIcontentlidata.forEach(function(v){
  v.addEventListener('click',function(){
    maskall.style.display='block'
  })
}) */

// 方法二:事件委派
APIcontentul.addEventListener('click',function(e){
  // console.log(9);
  // console.log(e.target.className);
  if(e.target.className==='APIcontentlidata'){
    maskall.style.display='block'
  }
})

/*
 * 需求6:点击mask隐藏自己(但是这种在点击登录页面的时候也会隐藏)
*/
maskall.addEventListener('click',function(){
  maskall.style.display='none'
})

/* 
*需求7:点击登录页面loginrightform不会隐藏自己(阻止冒泡)
 */

//获取元素:
let loginrightform=document.querySelector('.loginrightform')
console.log(loginrightform);

loginrightform.addEventListener('click',function(e){
  e.stopPropagation()
})

/* 
*      方法一点击事件
*需求8:鼠标移入账号登录,添加激活样式,并显示对应内容
 */
//获取元素
let acountlogin1=document.querySelector('.acountlogin1')

let acount=document.querySelector('.acount')

let codelogin1=document.querySelector('.codelogin1')

let code=document.querySelector('.code')

console.log(acountlogin1,codelogin1,acount,code);

/* //注册点击事件
acountlogin1.addEventListener('click',function(){
  acount.style.display='block'
  code.style.display='none'
})

//注册点击事件
codelogin1.addEventListener('click',function(){
  console.log(0);
  acount.style.display='none'
  code.style.display='block'
}) 

/**
 * 方法二:选项卡的方式
 * 9.需求: 鼠标移入菜单(toggle-login a)
 *         为当前菜单添加激活样式
 *         显示当前菜单对应的内容(login-box div)
 */
tabCard('.loginrightforma a', '.loginrightform div')


//表单账号验证:输入事件时:显示icon,

//获取元素
let user=document.querySelector('.loginrightformp .user')
let password=document.querySelector('.password')

let icon1=document.querySelector('.icon1')
let icon2=document.querySelector('.icon2')

console.log(icon1,icon2,user,password);

//1账号框注册事件
user.addEventListener('input',function(){
  // console.log(9);
  if(user.value.length>0){
    // console.log(9);
    icon1.style.display='block'
  }else{
    // console.log(0);
    icon1.style.display='none'
  }
})
//2密码框注册事件
password.addEventListener('input',function(){
  // console.log(9);
  if(password.value.length>0){
    // console.log(9);
    icon2.style.display='block'
  }else{
    // console.log(0);
    icon2.style.display='none'
  }
})

//3点击ico1n删除文本框内容,并隐藏自己
icon1.addEventListener('click',function(){
  user.value=''
  icon1.style.display=''
})

//4点击icon2删除文本框内容,并隐藏自己
icon2.addEventListener('click',function(){
  password.value=''
  icon2.style.display=''
})
